<template>
	<view>
		<view class="img-upload">
			<view class="top-tips">
				*请拍摄/上传您本人的身份证件(图片限10M以内)
			</view>
			<view class="flex-space-between">
				<view class="img-upload-item">
					<view class="title">
						身份证人像面证件照
					</view>
					<view class="box-image" @click="chooseImg(1)">
						<image class="bg-image"
							:src="frontIDCardImage ? frontIDCardImage : require('@/common/images/identification/img-id-photo-png.png')"
							mode="aspectFill"></image>
						<view class="add">+</view>
						<view class="bottom">
							点击上传身份证人像面图片
						</view>
					</view>
				</view>
				<view class="img-upload-item">
					<view class="title">
						身份证国徽面证件照
					</view>
					<view class="box-image" @click="chooseImg(2)">
						<image class="bg-image"
							:src="backIDCardImage ? backIDCardImage : require('@/common/images/identification/img-national-emblem-png.png')"
							mode="aspectFill"></image>
						<view class="add">+</view>
						<view class="bottom">
							点击上传身份证国徽面图片
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="next" @click="idCardSubmit">确定</view>
	</view>
</template>

<script>
	import uploadImgMixin from '@/mixins/uploadImg';
	export default {
		mixins: [uploadImgMixin],
		data() {
			return {
				frontIDCardImage: "",
				backIDCardImage: "",
			};
		},
		methods: {
			async idCardSubmit() {
				// console.log(this.$store.getters.terminalInto);
				console.log(this.terminalInto);
				if (!this.frontIDCardImage || !this.backIDCardImage ) {
					return this.$tip.toast('请上传完整!');
				}
				// this.$tip.loading('提交中....');
				this.$nav.goBack()
				uni.$emit("formDataFn")
			},
			chooseImg(type) {
				let _this = this;
				let chooseImgtype = ['album', 'camera'];
				let otherParams = {}
				if (type == 9) {
					if (!_this.form.realName && !_this.form.identityCard) {
						return _this.$tip.toast('请先上传身份证照或者填写姓名和身份证号!');
					}
					chooseImgtype = ['camera'];
					otherParams = {
						realName: _this.form.realName,
						identityCard: _this.form.identityCard
					}
				}
				_this.$selectUpload.chooseImg(1, chooseImgtype).then(async res => {
					const size = res.tempFiles[0].size;
					// const pixelsValue = size < (1024*1024)?1500000:90000;
					// console.log({pixelsValue});
					_this.$tip.loading('上传中...');
					setTimeout(function() {
						_this.$tip.loaded();
					}, 10000);

					// h5要单独压缩
					// // #ifdef H5
					// if (size > (1024 * 1024*4)) {
					// 	base64 = await this.$refs.wCompress2.start(res.tempFilePaths[0], {
					// 		pixels: 90000, // 最大分辨率，默认二百万
					// 		quality: 0.8, // 压缩质量，默认0.8
					// 		type: 'png', // 图片类型，默认jpg
					// 		base64: true // 是否返回base64，默认false，非H5有效
					// 	});
					// } else {
					// 	base64 = await this.getBase64(res.tempFilePaths[0]);
					// }
					// // #endif
					// // #ifndef H5
					// base64 = await this.getBase64(res.tempFilePaths[0]);
					// // #endif
					// let base64;
					if (size > (1024 * 1024 * 10)) {
						return this.$tip.toast('上传图片不超过10M!');
					}
					// base64 = await this.getBase64(res.tempFilePaths[0]);
					// let ocrInfo = await this.ocrGetInfo(base64, `0${type}`, otherParams);
					const file = res.tempFilePaths[0];
					let ocrInfo = await this.uploadApiRequest(file, `0${type}`, otherParams);
					this.$tip.loaded();
					if (ocrInfo.code == 200) {
						this.$tip.toast('上传成功!','sccess');
						switch (type) {
							case 1:
								this.frontIDCardImage = ocrInfo.msg;
								break;
							case 2:
								this.backIDCardImage = ocrInfo.msg;
								break;

							default:
								break;
						}

					} else {
						_this.$tip.loaded();
						_this.$tip.toast(ocrInfo.msg);
					}
				}).catch(e => {
					console.log(e)
					_this.$tip.toast(e);
					_this.$tip.loaded();
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}

	.img-upload {
		background-color: #ffffff;
		padding: R(30px);
		padding-top: 0;

		.top-tips {
			text-align: left;
			font-size: R(20px);
			color: #C7C7C7;
			padding-top: R(40px);
		}

		.img-upload-item {

			.title {
				color: #1E1E20;
				font-size: R(22px);
				font-weight: 500;
				margin: R(20px) R(30px);
				position: relative;
			}

			.title::before {
				content: "";
				position: absolute;
				display: block;
				left: R(-20px);
				width: R(10px);
				height: R(10px);
				background-color: #1E1E20;
				border-radius: R(50%);
				margin-top: R(10px);
			}

			.box-image {
				// background-color: #DFDFE8;
				border-radius: R(10px);
				padding: R(35px) R(55px);
				width: R(338px);
				border: 1px dotted #c7c7c7;
				// height: R(250px);
				margin: 0 auto;
				position: relative;

				.bg-image {
					width: R(227px);
					height: R(116px);
				}

				.add {
					width: R(50px);
					height: R(50px);
					background-color: #3BC3FF;
					border-radius: 50%;
					text-align: center;
					font-size: R(50);
					line-height: R(45px);
					color: #ffffff;
					position: absolute;
					top: 50%;
					left: 50%; //居中
					margin-left: R(-30px);
					margin-top: R(-30px);
				}

				.bottom {
					font-size: R(15px);
					color: #C7C7C7;
					margin-top: R(20px);
				}
			}
		}


		.tips {
			text-align: center;
			margin: R(30px);
			font-size: R(25px);
			color: #1E1E20;
			font-weight: 400;
		}
	}

	.next {
		margin: 40upx auto 0;
		width: 581upx;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		// background: $themeColor;
		// border: 1upx solid $themeColor;
		border-radius: 10upx;
		font-size: 30upx;
		font-weight: 400;
		color: #ffffff;
		background-color: #3BC3FF;
		// border-radius: R(50px);
	}
</style>